<template>
    <!-- header部分 -->
    <header>
        <p>确认订单</p>
    </header>

    <!-- 订单信息部分 -->
    <div v-if="address.id<=0" class="order-info" @click="chooseAddress()">
        <h5>订单配送至：</h5>
        <div class="order-info-address">
            <p>请选择地址</p>
            <font-awesome-icon  :icon="['fas', 'angle-right']" style="color: white;font-size: 6vw;"/>
        </div>
        <p>联系人 电话</p>
    </div>
    <div v-else class="order-info" @click="chooseAddress()">
        <h5>订单配送至：</h5>
        <div class="order-info-address">
            <p>{{address.province+address.city+address.district+address.address}}</p>
            <font-awesome-icon  :icon="['fas', 'angle-right']" style="color: white;font-size: 6vw;"/>
        </div>
        <p>{{address.contactName}} {{address.contactTel}}</p>
    </div>
    <p style="text-align: left;padding-left: 1.8vw;font-size: 3.5vw">{{ cart.businessVO.businessName }}</p>
    <!-- 订单明细部分 -->
    <ul class="order-detailed">
        <template v-for="item in cart.itemVOS">
            <li>
                <div class="order-detailed-left">
                    <img :src="item.food.foodImg">
                    <p>{{item.food.foodName}} x {{item.quantity}}</p>
                </div>
                <p>&#165;{{item.food.foodPrice*item.quantity}}</p>
            </li>
        </template>
    </ul>
    <div class="order-deliveryfee">
        <p>配送费</p>
        <p>&#165;{{cart.businessVO.deliveryPrice}}</p>
    </div>
  <!-- 合计部分 -->
    <div class="total">
        <div class="total-left">
            {{totalPrice}}
        </div>
        <div class="total-right" @click="navigatorToPay"  style="background-color: #38CA73;">
            提交订单
        </div>
        <div class="total-right" @click="cancelPay" style="background-color: #fc5531;">
            取消支付
        </div>
    </div>
</template>

<script setup lang="ts">

import {ref,onMounted} from "vue";
import {useRoute} from "vue-router";
import {CartVO} from "../type/cart.ts";
import {getCartAPI} from "../service/cart.ts";
import router from "../router";
import {BusinessVO} from "../type/business";
import {userStore} from "../store/user.ts";
import {getAddressByIdAPI} from "../service/address.ts";
import {AddressVO} from "../type/address";
import {AddOrderRequestDTO} from "../type/order";
import {add} from "../service/order.ts";
const address = ref<AddressVO>({
    id:0,
    userId:0,
    contactName:"",
    contactSex:0,
    contactTel:"",
    address:"",
    province:"",
    city:"",
    district:"",
    isDefaultAddress:false
})

const user = userStore()
const cart = ref<CartVO>({
    id:0,
    userId:0,
    businessVO:new class implements BusinessVO {
        businessAddress: string;
        businessExplain: string;
        businessImg: string;
        businessName: string;
        deliveryPrice: number;
        id: number;
        quantity: number;
        starPrice: number;
    },
    totalQuantity:0,
    itemVOS:[]
});

const orderCreateDTO = ref<AddOrderRequestDTO>({
    businessId:0,
    cartId:0,
    addressId:0
})


const chooseAddress = ()=>{
    router.push({path:"/userAddress"})
}

const totalPrice = ref(0)
const route = useRoute()
const businessId = route.params.id as number
onMounted(async ()=>{
    //获取购物车内容
    const res = await getCartAPI(businessId);
    cart.value = res.data;
    cart.value.itemVOS.forEach(item=>{
        totalPrice.value += item.quantity*item.food.foodPrice
    })
    totalPrice.value = totalPrice.value + cart.value.businessVO.deliveryPrice

    //获取用户地址
    if (user.loginUser && user.loginUser.deliveryAddressId>0){
        const res = await getAddressByIdAPI(user.loginUser.deliveryAddressId);
        if (res.data != null && res.data.id>0){
            console.log(res.data)
            address.value = res.data
        }
    }

})
const navigatorToPay = async ()=>{
    if (address.value.userId<=0) alert("请选择地址！")
    else {
        orderCreateDTO.value.businessId = cart.value.businessVO.id
        orderCreateDTO.value.cartId = cart.value.id
        orderCreateDTO.value.addressId = address.value.id
        const res = await add(orderCreateDTO.value)
        if (res.data != null && res.data>0){
            router.push({path:`/pay/${res.data}`})
        }else {
            alert("创建订单失败")
        }

    }

}
const cancelPay = ()=>{
    // router.replace({path:'/order'})
}

</script>

<style scoped>
p,h5{
    margin: 0;
}
header{
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;

    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;

    display: flex;
    justify-content: center;
    align-items: center;
}
/****************** 订单信息部分 ******************/
.order-info{
    width: 100%;
    margin-top: 12vw;
    background-color: #0097EF;
    box-sizing: border-box;
    padding: 2vw;
    color: #fff;
}
.order-info h5{
    font-size: 3vw;
    font-weight: 300;
    text-align: left;
}
.order-info .order-info-address{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-weight: 700;
    user-select: none;
    cursor: pointer;
    margin: 1vw 0;
}
.order-info .order-info-address p{
    width: 90%;
    font-size: 5vw;
    text-align: left;
}

.order-info p{
    font-size: 3vw;
    text-align: left;
}
/****************** 订单合计部分 ******************/
.total{
    width: 100%;
    height: 14vw;

    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
}
.total .total-left{
    flex: 2;
    background-color: #505051;
    color: #fff;
    font-size: 4.5vw;
    font-weight: 700;
    user-select: none;

    display: flex;
    justify-content: center;
    align-items: center;
}
.total .total-right{
    flex: 1;
    color: #fff;
    font-size: 4.5vw;
    font-weight: 700;
    user-select: none;
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
}
.order-detailed{
    width: 100%;
}
.order-detailed li{
    width: 100%;
    height: 16vw;
    box-sizing: border-box;
    padding: 3vw;
    color: #666;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
.order-detailed li .order-detailed-left{
    display: flex;
    align-items: center;
}
.order-detailed li .order-detailed-left img{
    width: 10vw;
    height: 10vw;
}
.order-detailed li .order-detailed-left p{
    font-size: 3.5vw;
    margin-left: 3vw;
}
.order-detailed li p{
    font-size: 3.5vw;
}
.order-deliveryfee{
    width: 100%;
    height: 16vw;
    box-sizing: border-box;
    padding: 3vw;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 3.5vw;
}
</style>
